<template>
  <div class="app-container">
    <levelbar v-show="false"></levelbar>
    <!-- eschool -->
    <div class="e-school-wrapper" v-loading="loadingStatus" v-cloak>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">      
        <el-row :gutter="20">
            <el-col :span="6" justify="center" class="min-left-width" :class="'e-school-components-wrapper'">
            <div class="e-school-components">
                <h3 class="comp-title">组件</h3>
                <div class="comp-wrapper clearfix">
                <div class="comp-class-detail" @click.stop.prevent="compChange(index,item.type)" :class="[ compDefaultIndex== index ? 'active' :'']" :data-type="item.type" v-for="(item, index) in compList" :key="index">
                    <div class="u-icon-img" :class="['icon-' + item.type]"></div>
                    <div class="text">{{item.text}}</div>  
                </div>
                </div>
                <!-- 分享设置 -->
                <div class="share-setting">
                <h3 class="comp-title">分享设置</h3>
                <div class="share-cont clearfix">
                    <div class="share-logo" @click.stop.prevent="shareHandle" @mouseenter="showReplace=true" @mouseleave="showReplace=false">
                    <div class="sharg-img">
                        <span v-if="!ruleForm.shareLogoPic" class="upload-img-logo">上传<br/>logo</span>
                        <span v-if="ruleForm.shareLogoPic"><img :src="ruleForm.shareLogoPic" alt="学校logo" ></span>
                        <span v-show="showReplace&&ruleForm.shareLogoPic" @click.stop.prevent="shareHandle" class="replace-img">替换</span>
                    </div>
                    </div>
                    <div class="share-left">
                    <!-- FIXME: 这边的学校名字动态的 -->
                    <!-- TODO: -->
                    <h5>{{schoolName}}</h5>
                    <el-form-item prop="schoolMotto" class="school-motto">
                        <textarea type="textarea" v-model="ruleForm.schoolMotto" class="share-textarea" placeholder="分享时的摘要，可输入校训，限20字" :maxlength="20"></textarea>
                    </el-form-item>
                    </div>
                </div>
                </div>
                <div class="save-publish">
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col>
                            <!-- {{ isShowPublish ? '保存': '更新'}} -->
                        <el-button @click="saveData" :disabled="isPublish">{{ isShowPublish ? '保存': '更新'}}</el-button>
                        <!-- {{ isShowPublish ? '发布': '已发布'}} :disabled="!isSave" -->
                        <el-button type="primary"  :disabled="!isSave"  @click.stop="publish">{{ isShowPublish ? '发布': '已发布'}}</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            </el-col>
            <el-col :span="14" class="min-right-width" type="flex" justify="center">
            <div class="e-school-right">
                <div class="phone-cont-wrapper">
                <div class="phone-top"><img src="../../assets/eschool/phone-top.png"/></div>
                <div class="phone_title">
                    <i class="el-icon-arrow-left title-pos"></i>
                    <!-- 橘子中学 -->
                    <!-- <span>{{schoolName}}</span> -->
                    <div class="scroll-text">
                        <text-scroll :content="schoolName" :showtwo="false"></text-scroll>
                    </div>    
                </div>
                
                    <div class="phone_screen">
                        <div class="comp-list-component phone-comp" :class="[`component-${item.type}`]" v-for="(item, index) in phoneData" :key="index" :data-type="item.type" @click.stop.prevent="selectItemOp($event, index, item.type)" v-clickoutside="handleClickOutSide">
                            <div class="cp-item-content" :class="{'edit_mode_select': index == selectIndex}">
                                <template v-if="item.type=='carousel'">
                                    <div class="carousel-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide" v-for="(carouselItem, innerIndex) in item.carouselImg" :key="innerIndex">
                                                <a  href="javascript:;" :data-url="carouselItem.url"><img width="100%" :src="carouselItem.pic" alt=""></a>
                                            </div>
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                </template>
                                <template v-if="item.type=='menus'">
                                    <div class="es-school-menus-wrapper" >
                                        <div class="menus-item" :class="[`menus-flex${item.column}-width`]" v-for="(menusItem,innerIndex) in item.menusList" :key="innerIndex">
                                            <a href="javascript:;">
                                            <div class="u-icon-img"><img :src="menusItem.sPic"></div>
                                            <span>{{menusItem.sName}}</span>
                                            </a>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="item.type=='pic'">
                                    <div class="img">
                                        <img class="img-loading" :src="item.content" alt="图片" /> 
                                    </div>
                                </template>
                                <template v-if="item.type=='text'">
                                    <div class="text-comp-edit-wrapper">
                                        <div class="text-edit" :style="{'color':item.color, 'textAlign': item.align, 'fontSize':item.textFontSize + 'px'}" v-text="item.content"></div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <!-- import coursel from './coursel.ve'
                        import menulist from './menulist.ve'
                        <component :is="coursel"></component> -->
                        <div class="comp-list-component phone-comp" v-if="phoneData.length == 0">
                            <span class="none-component">暂无内容</span>
                        </div>
                        <operationPanel ref="operationPanel" :panel-type="panelType" :show-panel.sync="showPanel" v-show="showPanel" :style-obj="styleObj"></operationPanel>
                    </div>
                </div>
            </div>
            </el-col>
        </el-row>
      </el-form>
      <!-- dialog -->
      <div class="wrapper-dialog" v-if="dialogVisible">
        <el-dialog 
                :visible.sync="dialogVisible"
                title="上传图片"
                :before-close="handleClose"
                :class="['dialog-upload-img']"
                :modal="false"
                :close-on-click-modal="false"
            >
                <div class="dialog-upload-wrapper">
                    <file-upload  
                            ref="fileUploadComp"
                            class="file-uploadout"
                            :img-size="0.1953125"
                            @onSuccess="onSuccess"
                            @remove="handleRemove"
                            :file-list.sync="arr" 
                            :file-list-show.sync="fileListShow">
                                <div class="up-container el-upload el-upload--text">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div> 
                    </file-upload> 
                    <span class='tip-slot'>上传图片格式jpg、png、gif、jpeg</span>
                    <span class="tip-slot">图片尺寸：200*200 图片大小：200KB</span>
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col>
                            <el-button @click="cancleDialog">取消</el-button>
                            <el-button @click="setItemPic" type="primary" :disabled="disabled">确定</el-button>
                        </el-col>    
                    </el-row>    
                </div>
            </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css';
const MAX_COMPONENT = 20; // 最多20个组件模块
import Cookies from 'js-cookie';
import Swiper from 'swiper/dist/js/swiper.js';
import {insertCampusFrame, updateCampusFrame, listCampusIcon} from 'api/eschool';
import { getUserInfoDetail } from 'api/identifychange';
import clickoutside from '../../directive/clickoutside'; // 外部点击事件触发
import operationPanel from './comps/operationPanel';
import FileUpload from 'components/Upload/fileUpload';
import TextScroll from 'components/TextScroll/TextScroll'
import {mapMutations, mapGetters, mapActions} from 'vuex';
import Levelbar from '../layout/Levelbar';
export default {
    components: {
        operationPanel,
        FileUpload,
        TextScroll,
        Levelbar
    },
    name: 'frame',
    data() {
        return {
      // 组件合集
            compList: [
                {
                    type: 'pic',
                    text: '图片'
                },
                {
                    type: 'text',
                    text: '文字'
                },
                {
                    type: 'menus',
                    text: '菜单栏'
                },
                {
                    type: 'carousel',
                    text: '轮播图'
                }
            ],
            compDefaultIndex: -1,
            panelType: 'carousel',
            showPanel: false,
            styleObj: {},
            dialogVisible: false,
            arr: [],
            fileListShow: true,
            disabled: true,
            tempPic: '',
            showReplace: false,
            frameId: Cookies.get('frameId') == 'null' ? undefined: Cookies.get('frameId'),
            shareId: Cookies.get('shareId') == 'null' ? undefined: Cookies.get('shareId'),
            loadingStatus: false,
            isPublish: false,
            defaulMenuList: [], // 默认导航图
            ruleForm: {
                schoolMotto: '',
                shareLogoPic: ''
            },
            rules: {
                schoolMotto: [
                    { required: true, message: '请输入校训内容', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字', trigger: 'blur' },
                    { pattern: /^[^\s]+|[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                shareLogoPic: [
                    { required: true, message: '请上传学校logo'}
                ]
            },
            isSave: false,
            isShowPublish: true,
            tempListPic: [],
            textScrollOpt: {
                content: ''
            },
            schoolName: ''
        };
    },
    computed: {
        ...mapGetters([
            'schoolId',
            'phoneData',
            'selectIndex',
            'roleId'
        ])
    },
    watch: {
        phoneData() {
            this.initData();
        }
    },
    created() {
        this._getUserInfoDetail()
        this._getCampusFrame();
        
        this.getDefaultMenusList(); //  
        // console.log('created', 1);
        $(window).on('beforeunload', function() {
            return '确认保存数据吗？';
        });

    },
    mounted() {
    // swiper
        this.initData();
        this.$nextTick(() => {
            let eSchoolComponents = document.querySelector('.e-school-components');
            eSchoolComponents.style.position = 'fixed';
            eSchoolComponents.style.left = $(eSchoolComponents).position().left;
            eSchoolComponents.style.top = $(eSchoolComponents).position().top;
        });
        // 弹窗询问是否保存该页面的改动
        // //console.log(sessionStorage.setItem('phoneData', JSON.stringify(this.phoneData)));
        
    },
    methods: {
        ...mapMutations([
            'ADD_COMPONENT',
            'SELECT_ITEM',
            'RESET_SELECT_INDEX',
            'SET_PHONEDATA'
        ]),
        ...mapActions([
            'GET_PHONE_DATA',
            'INIT_PHONEDATA'
        ]),
        initData() {
            this.initSwiper();
        },
        // 保存数据
        saveData() {
            //
            if (!this.phoneData.length) {
                this.$message({
                    type: 'error',
                    message: '请添加组件内容'
                });
                return;
            }
            if (!this.ruleForm.shareLogoPic) {
                this.$message({
                    type: 'error',
                    message: '请上传学校logo图片'
                });
                return;
            }
            // if (String.trim(this.ruleForm.schoolMotto) == '') {
            //     this.$message({
            //         type: 'error',
            //         message: '学校校训内容不能为空'
            //     });
            //     return;
            // }
            let formData = {
                schoolId: this.schoolId,
                html: JSON.stringify(this.phoneData),
                schoolMotto: this.ruleForm.schoolMotto,
                pic: this.ruleForm.shareLogoPic,
                frameId: this.frameId,
                shareId: this.shareId
            };    

            // console.log(this.schoolId, '397696221050843136');

            // 保存数据
            if (formData.pic == '') {
                this.$message({
                    type: 'error',
                    message: '请上传学校logo'
                })
                return;
            }
            // if (formData.html) {
            //     //console.log(formData.html);   
            //     return;
            // }
            // 发送数据
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this._insertCampusFrame(formData);
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
            
        },
        
        // 插入数据 保存页面数据
        _insertCampusFrame(formData) {
            this.loadingStatus = true;
            insertCampusFrame(formData).then(res => {
                // 
                // //console.log(res);
                if (res&&res.data&&res.data.status == '200') {
                    this.loadingStatus = false;
                    this.$message({
                        message: `${this.isShowPublish?'保存':'更新'}成功`,
                        type: 'success'
                    });
                    // //console.log(this.isShowPublish, 'isShowPublish')
                    if (this.isShowPublish) {
                        this.isSave = true;
                    }

                    Cookies.set('frameId', res.data.content.frameId);
                    Cookies.set('shareId', res.data.content.shareId);
                    this.frameId = res.data.content.frameId;
                    this.shareId = res.data.content.shareId;
                } else {
                    this.$message({
                        message: `${this.isShowPublish?'保存':'更新'}失败`,
                        type: 'error'
                    });
                }
            })
        },
        // 生成链接地址
        publish() {
            // 
            let JsonData = {
                frameId: this.frameId,
                htmlUrl: process.env.ESCHOOL_URL + '/eschool/index.html?frameId='+ this.frameId + '&schoolId=' + this.schoolId  
            };
            this.loadingStatus = true;
            this.isSave = false;
            updateCampusFrame(JsonData).then(res => {
                if (res&&res.data.status == '200') {
                    this.$message({
                        message: '发布页面成功',
                        type: 'success'
                    });
                    this.isSave = false;
                    this.isShowPublish = false;
                    this.loadingStatus = false;
                } else {
                    this.$message({
                        message: '发布页面失败',
                        type: 'success'
                    });
                }
            });         
        },
        // 组件点击切换
        compChange(index, type) {
            // 组件内容大于20个时候提示信息
            if (this.phoneData.length >= MAX_COMPONENT) {
                this.$message({
                    message: `最多只能添加${MAX_COMPONENT}个组件`,
                    type: 'info'
                })
                return;
            }
            this.compDefaultIndex = index;
            let comData = {
                type,
                attr: ''
            }
            let typeData = this.getTypeData(type);
            let data = {
                ...comData,
                ...typeData  
            };
            this.ADD_COMPONENT(data); // 添加组件到phoneData数据中
            // 添加的时候显示panel
            this.setShowPanel(type);

            this.initSwiper();
        },
        // 初始化swiper
        initSwiper() {
            this.$nextTick(() => {
                let carouselContainer = document.querySelectorAll('.carousel-container');
                if (!carouselContainer.length) return;
                let arrayContainer = [].slice.call(carouselContainer);
                // 一张图的是不让轮播
                arrayContainer.forEach((lastItem) => {
                    // let lastItem = carouselContainer[carouselContainer.length - 1];
                    let swiperSlides = lastItem.querySelectorAll('.swiper-slide');
                    if (swiperSlides.length <= 1) {
                        return;
                    }
                    if (lastItem&&lastItem.swiper) {
                        lastItem.swiper.destroy();
                    }
                    lastItem.swiper = new Swiper(lastItem, {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        loop: true,
                        autoplay: 6000,
                        autoplayDisableOnInteraction: false,
                        observer: true
                    });    
                })

                
            });
        },
        // click 获取元素的位置信息
        selectItemOp(ev, index, type) {
            this.showPanel = true;
            let itemSelectEle = ev.target || ev.srcElement;
            let phoneComp = $(itemSelectEle).closest('.phone-comp');
            this.$refs.operationPanel.setTop(phoneComp);
            this.panelType = type;
            this.SELECT_ITEM(index);
        },
        // 显示panel
        setShowPanel(type) {
            this.showPanel = true;
            // debugger;
            this.SELECT_ITEM(this.phoneData.length - 1);
            this.panelType = type;
            this.$nextTick(() => {
                var phoneComp = $('.comp-list-component').eq(this.phoneData.length - 1);
                this.$refs.operationPanel.$el.style.position = 'absolute';
                this.$refs.operationPanel.$el.style.left = '490px'; // 写死了
                this.$refs.operationPanel.$el.style.top = phoneComp.position().top + 'px';
            });
        },
        // 计算分别类型的type初始数据
        getTypeData(type) {
            if (type=='carousel') {
                return { carouselImg: [
                    {
                        url: '',
                        pic: require('../../assets/eschool/banner_default.png'),
                        article: {
                            cateId: '',
                            artId: ''
                        }
                    }
                ]};
            } else if (type=='pic') {
                return {
                    content: require('../../assets/eschool/banner_default.png'),
                    article: {
                        cateId: '',
                        artId: ''
                    }
                }
            } else if (type=='menus') {
                return {
                    column: '3',
                    menusList: [].concat(this.defaulMenuList.slice(0, 6))
                }
            } else if (type=='text') {
                return {
                    article: {
                        cateId: '',
                        artId: ''
                    },
                    textFontSize: 14,
                    color: '#5b6b73',
                    content: '请输入文字内容，限20字',
                    align: 'left'
                }
            }
        },
        // 点击外部事件
        handleClickOutSide(e) {
            this.RESET_SELECT_INDEX();
            this.showPanel = false;
            this.$refs.operationPanel.operationClose();
        },
        // 关闭上传组件
        handleClose() {
            // 
            this.hideDialogUpload();
            this.$refs.fileUploadComp.clearFiles();
        },
        // 上传成功
        onSuccess(data) {
            // 
            if (data&&data.imgUrl) {
                this.disabled = false;
                this.tempPic = data.imgUrl;
                this.tempListPic = [{name: '', url: this.tempPic}];
            } else {
                this.$message({
                    type: 'error',
                    message: '上传图片出现问题'
                })
            }
        },
        // 删除图片调用的事件
        handleRemove() {
            // //console.log(1221212, 'remove');
            // 弹窗确认置灰
            this.disabled = true;
        },
         // 上传学校logo
        shareHandle() {
            // 
            this.dialogVisible = true;
            this.arr = this.tempListPic;
            if (this.ruleForm.shareLogoPic) {
                this.arr = [{name: '', url: this.ruleForm.shareLogoPic}]
            }
        },
        // 隐藏上传
        hideDialogUpload() {
            this.dialogVisible = false;
            this.tempListPic = [];
            if (!this.arr.length) {
                // alert(12121212);
                this.$refs.fileUploadComp.clearFiles();
            }
            this.disabled = true;
            this.tempPic = '';
        },
        // 取消上传
        cancleDialog() {
            this.hideDialogUpload();
        },
        // 设置上传logo图片
        setItemPic(data) {
            this.ruleForm.shareLogoPic = this.tempPic;
            this.handleClose();
            this.$refs.fileUploadComp.clearFiles();
            this.tempPic = '';
        },
        // 获取展示页内容 
        _getCampusFrame() {
            this.loadingStatus = true;
            this.INIT_PHONEDATA(this.schoolId).then(res => {
                // console.log(res);
                this.loadingStatus = false;
                this.ruleForm.shareLogoPic = res.pic;
                this.ruleForm.schoolMotto = res.schoolMotto;
                // this.isShowPublish = (res.status =='1') ? false : true; // 0 未发布 1 已发布
                this.isShowPublish = (res.status =='0' || res.status === null) ? true: false; // 0 未发布 1 已发布
                this.isSave = (res.status =='0' ? true : false);
                this.arr = (res.pic==='null' || res.pic) ? [{name: '', url: res.pic}]: [];
                if (res.pic) {
                    this.tempListPic = [{name: '', url: res.pic}];
                }
                // //console.log(res)
                // if (res.frameId) {
                // }
                Cookies.set('frameId', res.frameId || undefined);
                Cookies.set('shareId', res.shareId || undefined);
                this.frameId = res.frameId;
                this.shareId = res.shareId;
            });
        },
        // 设置默认的icon导航
        getDefaultMenusList() {
            listCampusIcon().then(res => {
                this.defaulMenuList = res.data.content.map((item) => {
                    item.article = {
                        cateId: '',
                        artId: ''
                    }
                    return item;
                })
            })
        },
        async _getUserInfoDetail() {
            await new Promise((resolve, reject) => {
                getUserInfoDetail().then(response => {  
                    response.data.content.forEach(item => {
                        if (item.roleId == this.roleId) {
                            // this.schoolId = item.schoolId;
                            this.schoolName = item.schoolName;
                            resolve(item.schoolId);
                        }                   
                    });
                });
            });
        }
    },
    directives: {
        clickoutside
    },
    destroyed() {
        $(window).off('beforeunload');
    }
};
</script>
<style lang="scss">
$w: 120px;
$h: 120px;
.e-school-wrapper {
  [v-cloak]{
      display: none;
  }
  .min-left-width {
    min-width: 340px;
  }
  .min-right-width {
    min-width: 542px;
  }
  .com-text {
    font-size: 14px;
    color: #7a7a7a;
  }
  .clearfix::after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
    font-size: 0;
  }
  .e-school-components-wrapper {
    width: 340px;
    min-height: 600px;
  }
  .e-school-components {
    width: 340px;
    height: 87%;
    padding: 28px 40px 0;
    background: #fff;
    z-index: 99;
    .comp-wrapper {
      margin-left: -20px;
    }
    .comp-class-detail {
      width: $w;
      height: $h;
      float: left;
      padding-top: 24px;
      margin-bottom: 20px;
      margin-left: 20px;
      background: #fafafa;
      text-align: center;
      cursor: pointer;
      .u-icon-img {
        margin: 0 auto;
        width: 52px;
        height: 52px;
        background: #ddd;
      }
      .icon-pic {
        background: url(../../assets/eschool/tupian.png);
      }
      .icon-text {
        background: url(../../assets/eschool/wenzi.png);
      }
      .icon-menus {
        background: url(../../assets/eschool/caidanlan.png);
      }
      .icon-carousel {
        background: url(../../assets/eschool/lunbotu.png);
      }
      &:hover {
        .icon-pic {
          background: url(../../assets/eschool/tupian-active.png);
        }
      }
      &:hover {
        .icon-text {
          background: url(../../assets/eschool/wenzi-active.png);
        }
      }
      &:hover{
        .icon-menus {
          background: url(../../assets/eschool/caidanlan-active.png);
        }
      } 
      &:hover {
        .icon-carousel {
          background: url(../../assets/eschool/lunbotu-active.png);
        }
      }
      .text {
        margin: 0 auto;
        padding-top: 12px;
        text-align: center;
        @extend .com-text;
      }
    }
    .comp-class-detail:hover {
      -webkit-transition: .8s box-shadow;
      transition: .8s box-shadow;
      background: #fff;
      box-shadow: 0px 0px 18px 0px rgba(27, 27, 27, 0.12);
    }
  }
  .share-setting {
    margin-top: 82px;
    .share-cont {
        .school-motto{
            margin-bottom: 0;
        } 
      .share-logo {
        float: left;
        width: 64px;
        height: 64px;
        position: relative;
        background: #ddd;
        margin-right: 13px;
        cursor: pointer;
        .sharg-img{
          width: 100%;
          height: 100%;
        }
        
        img{
          width: 100%;
          height: 100%;
        }
        .upload-img-logo {
          width: 64px;
          height: 64px;
          padding-top: 15px;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(27, 27, 27, 0.12);
          text-align: center;
          line-height: 18px;
          color: #fff;
          font-size: 14px;
          font-family: '微软雅黑';
        }
        .replace-img {
          width: 64px;
          height: 64px;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(27, 27, 27, 0.12);
          text-align: center;
          line-height: 64px;
          color: #fff;
        }
      }
        .share-left {
            float: left;
            width: 182px;
            h5 {
                width: 180px;
                white-space:nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                @extend .com-text;
            }
        
        }
        .share-textarea {
            width: 182px;
            height: 44px;
            border: 1px solid#ddd;
            resize: none;
            padding: 2px;
            outline: none;
            font-size: 12px;
            line-height: 18px;
            color: #7a7a7a;
        }
    }
  }
  .tip-slot{
      display: block;
      margin: 0 auto;
      width: 300px;
      color: #7a7a7a;
      margin-bottom: 10px;
      text-align: center;
  }
  .comp-title {
    font-size: 14px;
    line-height: 26px;
    color: #333;
    margin-bottom: 9px;
  }
  .save-publish {
    padding: 20px 0 15px;
  }
  .e-school-right {
    // min-width: 542px;
    float: left;
    width: 100%;
    padding: 0 20px;
    $phone-w: 480px;
    .phone-cont-wrapper {
      width: $phone-w;
      margin: 0 auto;
      background: #fff;
      .scroll-text {
          margin: 0 auto;
          width: 392px;
      }
      .phone_title {
        position: relative;
        font-size: 22px;
        text-align: center;
        color: #333;
        line-height: 57px;
        font-family: "PingFang-SC-Bold";
        border-bottom: 1px solid #ddd;
        .title-pos {
          position: absolute;
          left: 20px;
          top: 50%;
          font-size: 18px;
          -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
        }
      }
      .phone_screen {
        width: 480px;
        position: relative;
        min-height: 738px;
        .none-component {
            text-align: center;
            display: block;
            padding-top: 60px;
            color: #7a7a7a;
        }
        .phone-comp {
          cursor: pointer;
          position: relative;
          .edit_mode_select {
            min-height: 20px;
            word-wrap: break-word;
            border: 1px rgb(249,99,50) solid;
            -webkit-user-select: none;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            .edit_mode_layer {
                position: relative;
                z-index: 800;
                -webkit-user-select: none;
                -webkit-user-drag: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                width: 100%;
                height: 100%;
            }
          }
          .cp-item-content{
             min-height: 20px;
            .img {
              img{
                width: 100%;
                vertical-align: top;
                position: relative;
              }
            }
          }
          .text-comp-edit-wrapper {
              .text-edit {
                  padding: 5px 1px;
              }
          }
        }
      }
      
      // carousel-container
      .carousel-container {
        position: relative;
        width: 480px;
        height: 200px;
        overflow: hidden;
        .swiper-pagination-bullet {
          border-radius: 50%;
          width: 8px;
          height: 8px;
          background: #fafafa;
          margin: 0 3px;
        }
        .swiper-pagination-bullet.swiper-pagination-bullet-active {
        //   width: 18px;
          background: #fff;
          -webkit-transition: 0.2s width;
          transition: 0.2s width;
        }
      }
      .edit_mode_select{
          .carousel-container {
              width: 478px;
          }
      }
      // menus
      .es-school-menus-wrapper {
        height: auto;
        overflow: hidden;
        padding: 22px 0 12px;
        .menus-item {
          text-align: center;
          padding: 10px 0 20px;
          float: left;
          box-sizing: content-box;
          .u-icon-img {
            width: 72px;
            height: 72px;
            margin: 0 auto;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 64%;
            img{
              width: 90%;
            }
          }
          @for $i from 1 through 12 {
            .u-icon-ic#{$i} {
              background-image: url(../../assets/eschool/icon#{$i}.png);
            }
          }
          &.menus-flex3-width {
            width: 33.333333%;
            height: 120px;
            box-sizing: border-box;
          }
          &.menus-flex4-width {
            width: 25%;
            height: 110px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>

